<template>
	<view class="changeMobile2">
		<view class="header">
			<view class="head">
				<text>请输入新手机号和验证码</text>
			</view>
			
			<view class="info">
					<view class="item">
						<text>手机号:</text>
						<input class="uni-input"  type="number" maxlength="11" v-model="mobile" placeholder='请输入新手机号' placeholder-style="color:#cccccc" @input='changeBJ = true'>
					</view>
					<view class="item">
							<text>验证码:</text>
							<view class="codeInput">
								<input class="uni-input"  type="number"  v-model="vCode" placeholder='短信验证码' placeholder-style="color:#cccccc">
							</view>
							<view class="getCode" >
								<button class='button' :class="{gray:gray}" @click="getCode" :disabled="!active">{{sendSmsText}}</button>
							</view>
					</view>
					<view class="item">
						<text>新密码:</text>
						<input class="uni-input passwordInput" password type="text"  minlength="8" maxlength="20" v-model="password" placeholder='请输入8到20位新密码' placeholder-style="color:#cccccc">
					</view>
				
				
				 
			</view>
			
			
			
		</view>
			
		<view class="footer">
			<view class="next_btn" :class="{activeBj:changeBJ}" @click="next">下一步</view>
		</view>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
export default {
    data() {
        return {
            mobile: '',
            vCode: '',
            password: '',
            changeBJ: false,
            sendSmsText: '获取验证码',
            gray: false,
            active: true
        };
    },
    methods: {
        next() {
            if (!util.isMobile(this.mobile)) {
                uni.showToast({
                    title: '请输入正确的手机号码！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!this.vCode) {
                uni.showToast({
                    title: '验证码不能为空',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (this.password.length < 8 || this.password.length > 20) {
                uni.showToast({
                    title: '请输入8到20位新密码',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            uni.showLoading({
                title: '手机号更改中...'
            });

            util.ajax(
                'userMobileChange',
                {
                    mobile: this.mobile,
                    vCode: this.vCode,
                    password: this.password,
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        // console.log(json.data);
                        uni.setStorageSync('token', json.data.token);
                        uni.setStorageSync('mobile', json.data.mobile);
                        uni.showToast({
                            title: '更改成功',
                            icon: 'none',
                            duration: 600
                        });
                        setTimeout(() => {
                            uni.navigateTo({
                                url: './changeMobileSucess'
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        getCode() {
            if (!util.isMobile(this.mobile)) {
                uni.showToast({
                    title: '请输入正确的手机号码！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            util.ajax(
                'mobileCheckRegistered',
                {
                    mobile: this.mobile
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        uni.showToast({
                            title: '正在发送短信...',
                            icon: 'none',
                            duration: 1000
                        });
                        util.ajax(
                            'mobileValidationCode',
                            {
                                mobile: this.mobile,
                                findPassword: false
                            },
                            data => {
                                let json = data.data;
                                if (json.status) {
                                    this.gray = true;
                                    this.active = false;
                                    let total = 60;
                                    this.sendSmsText = total + 's后重发';
                                    this.timer = setInterval(() => {
                                        total--;
                                        this.sendSmsText = total + 's后重发';
                                        if (total <= 0) {
                                            clearInterval(this.timer);
                                            this.timer = null;
                                            this.sendSmsText = '获取验证码';
                                            this.active = true;
											this.gray = false;
                                        }
                                    }, 1000);
                                    uni.showToast({
                                        title: '短信发送成功,请注意查收!',
                                        icon: 'none',
                                        duration: 1000
                                    });
                                } else {
                                    uni.showToast({
                                        title: json.message,
                                        icon: 'none',
                                        duration: 1000
                                    });
                                }
                            }
                        );
                    } else {
                        uni.showToast({
                            title: '该号码已经注册，请输入新手机号!',
                            icon: 'none',
                            duration: 1200
                        });
                    }
                },
                (data, code) => {}
            );
        }
    },
    components: {
        uniIcon
    }
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
.getCode {
    button {
        background: white !important;
    }
}
.changeMobile2 {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .header {
        flex-direction: column;
        .head {
            color: #333333;
            font-size: 26upx;
            padding: 30upx 30upx 60upx;
            box-sizing: border-box;
            align-content: center;
        }
        .info {
            flex-direction: column;
            background: white;
            padding: 0 30upx;
            box-sizing: border-box;
            .item {
                flex-grow: 1;
                border-bottom: 1px solid #eeeeee;
                height: 100upx;
                align-items: center;
                text {
                    display: flex;
                    align-items: center;
                    color: #333333;
                    font-size: 30upx;
                }
                input {
                    font-size: 30upx;
                    padding-left: 30upx;
                }
                .passwordInput {
                    width: 90%;
                }
				.codeInput{
					width: 50%;
				}
            }
        }
        .getCode {
            width: 30%;
            border-left: 1px solid #eeeeee;
            box-sizing: border-box;
            flex-grow: 2;
            justify-content: center;
            .button {
                font-size: 30upx;
                color: #ff1268;
                margin: 0 !important;
            }
            .gray {
                color: #999999;
            }
        }
    }
    .footer {
        padding: 0 30upx;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        .next_btn {
            background: #ff1268;
            color: white;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 120upx auto 0;
            background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
            background: linear-gradient(to right, #fabde6, #ffa0c2);
        }
        .activeBj {
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
        }
    }
}
</style>
